<template>
    <div class="bread-header-wrap">
        <span v-for="(item, index) in breadList" :key="index" class="bread-header-item">
           <span class="name" @click="handleJump(item, index)">{{item.name}}</span>
           <i class="bread-icon">/</i>
        </span>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { pageJump } from '@/global/location-transfer';

const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return [];
        }
    }
})

const breadList = computed(() => {
    return props.list;
})

function handleJump(item, index) {
    console.log(item.route);
    if(index !== props.list?.length -1) {
       pageJump(item.route);
    }
}

</script>

<style lang="scss" scoped>
.bread-header-wrap {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-bottom: 24px;
    padding-top: 2px;
    .name {
        max-width: 400px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        color: var(--srt-main-text-color);
        &:hover{
            color: var(--srt-main-active-text-color);
        }
    }

    i {
        margin: 0 6px;
        font-size: 12px;
        color: var(--srt-color-gray);
    }
}
.bread-header-item {
    &:last-child {
        i {
            display: none;
        }
        .name {
            cursor: auto;
            color: var(--srt-color-info);
        }
    }
}
</style>